<template>
  <div class="qc-setting">
    <a-drawer
      width="300px"
      placement="right"
      :closable="false"
      :visible="visible"
      @close="onClose"
      :drawer-style="{ position: 'absolute' }"
    >
      <div class="qc-setting-drawer-content">
        <div class="qc-setting-drawer-content-item">
          <h3 class="qc-setting-drawer-item-title">整体风格设置</h3>
          <div class="qc-setting-drawer-item-Checkbox">
            <a-tooltip>
              <template slot="title">暗色菜单风格</template>
              <div class="qc-setting-drawer-item-Checkbox-item" @click="handleMenuTheme('dark')">
                <img :src="require('@/assets/images/dark.svg')" alt="dark" />
                <div class="qc-setting-drawer-item-Checkbox-selectIcon" v-if="menuTheme === 'dark'">
                  <a-icon type="check" />
                </div>
              </div>
            </a-tooltip>
            <a-tooltip>
              <template slot="title">亮色菜单风格</template>
              <div class="qc-setting-drawer-item-Checkbox-item" @click="handleMenuTheme('light')">
                <img :src="require('@/assets/images/light.svg')" alt="light" />
                <div class="qc-setting-drawer-item-Checkbox-selectIcon" v-if="menuTheme !== 'dark'">
                  <a-icon type="check" />
                </div>
              </div>
            </a-tooltip>
          </div>
        </div>
        <a-divider></a-divider>
        <div class="qc-setting-drawer-content-item" v-if="!isMobile()">
          <h3 class="qc-setting-drawer-item-title">导航模式</h3>
          <div class="qc-setting-drawer-item-Checkbox">
            <a-tooltip>
              <template slot="title">侧边栏导航</template>
              <div class="qc-setting-drawer-item-Checkbox-item" @click="handleMenuType('sideMenu')">
                <img :src="require('@/assets/images/dark.svg')" alt="sideMenu" />
                <div
                  class="qc-setting-drawer-item-Checkbox-selectIcon"
                  v-if="menuType === 'sideMenu'"
                >
                  <a-icon type="check" />
                </div>
              </div>
            </a-tooltip>
            <a-tooltip>
              <template slot="title">顶部栏导航</template>
              <div class="qc-setting-drawer-item-Checkbox-item" @click="handleMenuType('topMenu')">
                <img :src="require('@/assets/images/topMenu.svg')" alt="topMenu" />
                <div
                  class="qc-setting-drawer-item-Checkbox-selectIcon"
                  v-if="menuType !== 'sideMenu'"
                >
                  <a-icon type="check" />
                </div>
              </div>
            </a-tooltip>
          </div>
        </div>
        <a-divider></a-divider>
        <div class="qc-setting-drawer-content-item">
          <a-list :split="false">
            <a-list-item>
              <a-switch
                slot="actions"
                size="small"
                :disabled="(menuType === 'topMenu')"
                :defaultChecked="fixSidebar"
                @change="handleFixSidebar"
              />
              <a-list-item-meta>
                <div
                  slot="title"
                  :style="{ textDecoration: menuType === 'topMenu' ? 'line-through' : 'unset' }"
                >固定侧边菜单</div>
              </a-list-item-meta>
            </a-list-item>
            <a-list-item>
              <a-switch
                slot="actions"
                size="small"
                :defaultChecked="fixHeader"
                @change="handleFixHeader"
              />
              <a-list-item-meta>
                <div slot="title">固定header</div>
              </a-list-item-meta>
            </a-list-item>
          </a-list>
        </div>
      </div>
      <div class="qc-setting-drawer-handle" @click="toggle" slot="handle">
        <a-icon type="setting" v-if="!visible" />
        <a-icon type="close" v-else />
      </div>
    </a-drawer>
  </div>
</template>
<script>
import { mixin, mixinDevice } from "@/utils/mixin";
export default {
  mixins: [mixin, mixinDevice],
  data() {
    return {
      visible: false
    };
  },
  methods: {
    onClose() {
      this.visible = false;
    },
    toggle() {
      this.visible = !this.visible;
    },
    handleMenuTheme(menuTheme) {
      this.$store.dispatch("setting/toggleMenuTheme", menuTheme);
    },
    handleMenuType(menuType) {
      this.$store.dispatch("setting/toggleMenuType", menuType);
    },
    handleFixSidebar(flag) {
      this.$store.dispatch("setting/toggleFixSidebar", flag);
    },
    handleFixHeader(flag) {
      this.$store.dispatch("setting/toggleFixHeader", flag);
    }
  }
};
</script>

<style lang="less">
.qc-setting-drawer-item-Checkbox {
  display: flex;

  .qc-setting-drawer-item-Checkbox-item {
    margin-right: 16px;
    position: relative;
    border-radius: 4px;
    cursor: pointer;

    img {
      width: 48px;
    }

    .qc-setting-drawer-item-Checkbox-selectIcon {
      position: absolute;
      top: 0;
      right: 0;
      width: 100%;
      padding-top: 15px;
      padding-left: 24px;
      height: 100%;
      color: #1890ff;
      font-size: 14px;
      font-weight: 700;
    }
  }
}

.qc-setting-drawer-handle {
  position: absolute;
  top: 240px;
  background: #1890ff;
  width: 48px;
  height: 48px;
  right: 300px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  cursor: pointer;
  pointer-events: auto;
  z-index: 1001;
  text-align: center;
  font-size: 16px;
  border-radius: 4px 0 0 4px;
}
.qc-setting-drawer-handle i {
  color: #fff;
  font-size: 20px;
}
.qc-setting-drawer-content-item {
  margin-bottom: 24px;
}
</style>